<template>
  <div class="home-container">
    <van-nav-bar fixed>
    <template #left>
  <img class="logo" src="@/assets/images/logo.png" alt="logo" />
    </template>
  <template #right>
      <router-link to="/search">
    <van-icon name="search" size="25" color="#fff"/>
      </router-link>
  </template>
</van-nav-bar>
<!--  顶部标签选项 -->
<van-tabs v-model="channelId"
      animated
      sticky
      offset-top="1.226667rem">
  <van-tab :name="obj.id" :title="obj.name" v-for="obj in userChannelsList" :key="obj.id">
    <!-- 下拉刷新数据哈 -->
    <van-pull-refresh
  v-model="isLoading"
  success-text="刷新成功"
  @refresh="onRefresh"
>
<!-- 上拉刷新数据
immediate-check 初始化不能检测滚动-->
 <van-list
  v-model="loading"
  :finished="done"
  finished-text="没有更多了"
  :immediate-check='false'
  @load="onLoadFn"
>

   <artcile-list :List="ArticleList" @dislike="del"/>
</van-list>
</van-pull-refresh>
  </van-tab>
</van-tabs>
<!-- 加号操作 -->
      <van-icon name="plus" size="0.45rem" class="moreChannels" @click="show=true"/>
<van-popup
  v-model="show"
  class="edit_wrap"
><channel
 @del-channel="delChannel"
 @click="show=false"
 :channelsArticleList="userChannelsList"
 @add-channelFn="add"
 @switch-channel="switchChannel"
    ></channel></van-popup>
  </div>
</template>

<script>
// 导入弹出层自定义的组件
import channel from './channel.vue'
import { getuserHomeApi, getArticlesApi, genxinChannel } from '@/api/home'
export default {
  name: 'Home',
  // 在这使用就是局部注册一哈就完事哈
  components: { channel },
  data () {
    return {
      // 管理弹出层
      show: false,
      // 下拉列表刷新加载贡多的数据
      // 知道整个列表全部加载完毕
      done: false,
      // 只是将当面前页的状态置为fasle
      loading: false,
      // 下拉时刷新当前页面的数据
      isLoading: false,
      //  获取列表详情channels
      userChannelsList: [],
      channelId: 0,
      // 文章列表数组
      ArticleList: []
    }
  },
  // 使用switch来监听data中数据的变量
  watch: {
    // 监听谁就写谁哈
    channelId () {
      this.onLoadFn(true)
    }
  },
  // 页面加载就展示出顶部的标签
  async created () {
    console.log(213)
    const res = await getuserHomeApi()
    this.userChannelsList = res.data.channels
    // 在主页面获取列表文章 (封装函数)
    this.onLoadFn(true)
  },
  //  在当前页面滚到某一个位置,再次跳转到另外一个页面 再切换回到原来的滚动页面的位置哈
  // 使用beforeRouterLeave() {} 路由独立守卫
  activated () {
  // 将滚动的距离做一个保存
    // 进入页面触发的钩子函数哈
    window.scrollTo(0, this.scroll)
  },
  beforeRouteLeave (to, from, next) {
    this.scroll = window.scrollY
    next()
  },
  methods: {
    // 父传子接啊点击徽标删除数据
    delChannel (idx) {
    // 根据传过来的id删除就好
      this.userChannelsList.splice(idx, 1)
      this.pulishdate()
      this.$toast('删除成功')
    },
    async pulishdate () {
      // 返回给后台
      await genxinChannel({ channels: this.channels })
      this.$toast('添加成功')
    },
    // 点击没有的并且添加到已有的当中哈添加数据
    add (obj) {
      this.userChannelsList.push(obj)
      // 点击添加到后台中 不只是添加到本都数据中哈
      this.pulishdate()
    },
    // 点击切换频道
    switchChannel (ID) {
      this.channelId = ID
      // 是根据id获取的信息所系只需要关闭弹出层就好啦
      this.show = false
    },
    // 删除不感兴趣的信息
    del (idx) {
      this.ArticleList.splice(idx, 1)
      // 为了防止用户删除是页面露出空白 判断数组的平均小于6就重新拉取一次
      if (this.ArticleList.length <= 6) {
        this.onLoadFn(true)
      }
    },
    // 下拉时获取最新的数据
    onRefresh () {
      // 传入参数执行用更新后的直接覆盖掉当前数组
      this.onLoadFn(true)
      this.isLoading = false
    },
    // 下拉列表时候触发的函数 另外在这封装成公共函数  方便调用哈
    async  onLoadFn (isFirst = false) {
      const resp = await getArticlesApi({
        channelId: this.channelId,
        timestamp: this.timestamp
      })
      // 使用结构赋值 拿到里面的数据
      const { results, pre_timestamp } = resp.data
      // this.ArticleList = results
      this.timestamp = pre_timestamp
      if (this.timestamp == null) {
        // 此时只需要吧新值赋值回去就好啦
        this.ArticleList = [...results]
        // 表示全部加载完成设置为true
        this.done = true
        return
      }
      if (isFirst) {
        // 如果进到这里面就是上面tab发生切换直接吧最新的数据给到数组就好 不需要在合并
        this.ArticleList = [...results]
      } else {
        // 重新拉去就将原有的数据 与其新的数据合并到一起 让其数组变长循环生成多条数据
        this.ArticleList = [...this.ArticleList, ...results]
        //  每一次加载完成将当前也设置为false
      }
      // this.done = false
      this.loading = false
    }
  },
  computed: {
    channels () {
      // return this.userChannelsList.reduce((accu, obj, index) => {
      //   const item = {
      //     id: obj.id,
      //     req: index + 1
      //   }
      //   // 吧id为零的元素排除掉
      //   if (item.id > 0) {
      //     accu.push(item)
      //   }
      //   return accu
      // }, [])
      // 使用map + filter映射的方法
      return this.userChannelsList.map((obj, index) => {
        // 还是同样的方法呗!
        const time = {
          id: obj.id,
          req: index + 1
        }
        if (this.userChannelsList.filter(item => item.id > 0)) {
        // 上面做限制
          return time
        }
      })
    }
  }

}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
/* tab内容距离tab导航的距离 */
/deep/ .van-tabs__content{
  padding-top: 44px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 20px;
  background-color: #fff;
}
// 设置小图标的样式
.moreChannels {
  position: fixed;
  top:60px;
  right: 8px;
  z-index: 999;
}
.edit_wrap {
  width: 100%;
  height: 100%;
}
</style>
